<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的在线简历</title>
    <link rel="stylesheet" href="styles.css">
    <style>/* styles.css */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        
        header {
            background-color: #0073e6;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        header .profile-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        
        header h1 {
            margin: 0;
            font-size: 2em;
        }
        
        header p {
            margin: 5px 0;
        }
        
        .contact-info {
            margin-top: 10px;
        }
        
        .contact-info a {
            color: white;
            text-decoration: none;
        }
        
        .contact-info a:hover {
            text-decoration: underline;
        }
        
        .section {
            background-color: white;
            margin: 20px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .section h2 {
            border-bottom: 2px solid #0073e6;
            padding-bottom: 10px;
            color: #0073e6;
        }
        
        .content {
            margin-top: 15px;
        }
        
        .content h3 {
            margin-top: 10px;
            color: #333;
        }
        
        ul {
            list-style-type: disc;
            margin-left: 20px;
        }
        
        footer {
            text-align: center;
            padding: 10px;
            background-color: #0073e6;
            color: white;
            margin-top: 20px;
        }
        .crawler-section {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .crawler-form {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        .crawler-form input {
            flex: 1;
            padding: 8px;
        }
        .crawler-form button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .crawler-results {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
            max-height: 400px;
            overflow-y: auto;
        }
        .result-section {
            margin-bottom: 15px;
        }
        .result-title {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .result-item {
            margin-left: 20px;
            margin-bottom: 5px;
        }
</style>
</head>
<body>
    <section id="crawler" class="section crawler-section">
        <h2 onclick="toggleSection('crawler-content')">网站爬取工具</h2>
        <div id="crawler-content" class="content">
            <div class="crawler-form">
                <input type="text" id="crawl-url" placeholder="输入要爬取的URL" value="http://119.23.145.136">
                <button onclick="crawlWebsite()">开始爬取</button>
            </div>
            <div id="crawler-results" class="crawler-results" style="display:none;">
                <div class="result-section">
                    <div class="result-title">页面标题:</div>
                    <div id="page-title" class="result-item"></div>
                </div>
                <div class="result-section">
                    <div class="result-title">链接 (共<span id="links-count">0</span>个):</div>
                    <div id="links-list" class="result-item"></div>
                </div>
                <div class="result-section">
                    <div class="result-title">图片 (共<span id="images-count">0</span>个):</div>
                    <div id="images-list" class="result-item"></div>
                </div>
                <div class="result-section">
                    <div class="result-title">文本内容:</div>
                    <div id="text-content" class="result-item"></div>
                </div>
            </div>
        </div>
    </section>
    <header>
        <div class="profile">
            <img src="profile.jpg" alt="个人照片" class="profile-img">
            <h1>杨继铿</h1>
            
            <p>求职意向：后端类工程师</p>
        </div>
        <div class="contact-info">
            <p>电话: 13570758314</p>
            <p>邮箱: 1498907484@qq.com</p>
            
            <p>码云: <a href="https://gitee.com/listen-to-can" target="_blank">https://gitee.com/listen-to-can</a></p>
        </div>
    </header>


        <div class="content">
            <p><strong>海南职业技术学院</strong> - 软件技术专业</p>
            <p>2023.09 - 2023.06</p>
            <p>主修课程: Java编程、数据库原理、Web开发</p>
            <p>主修课程: Java编程、数据库原理、Web开发、python</p>
        </div>
    </section>


        <div class="content">
            <ul>
                <li>熟练掌握Java、Python编程语言</li>
                <li>熟悉Spring Boot、MyBatis等开发框架</li>
                <li>熟悉Spring Boot开发框架</li>
                <li>熟悉MySQL数据库</li>
                <li>熟悉HTML、CSS、JavaScript等前端技术</li>
                <li>熟悉Linux操作系统和Git版本控制工具</li>

        <h2>项目经验</h2>
        <div class="content">
            <h3>在线图书管理系统</h3>
            <h3>我的宿舍</h3>
            <h3>学生信息管理系统</h3>
            <p><strong>项目时间:</strong> 2022.03 - 2022.06</p>
            <p><strong>项目描述:</strong> 基于Spring Boot和MySQL开发的图书管理系统，支持图书的增删改查、借阅归还等功能。</p>
            <p><strong>个人职责:</strong> 负责后端开发，设计数据库表结构。</p>
            <p><strong>技术栈:</strong> Java, Spring Boot, MySQL, HTML, CSS, JavaScript</p>
        </div>
        <div class="content">
            <h3>个人博客网站</h3>
            <p><strong>项目时间:</strong> 2023.09 - 2023.12</p>
            <p><strong>项目描述:</strong> 使用Django框架开发的个人博客网站，支持文章发布、评论、用户注册登录等功能。</p>
            <p><strong>个人职责:</strong> 负责前后端开发，部署到Linux服务器。</p>
            <p><strong>技术栈:</strong> Python, HTML, CSS, JavaScript</p>
        </div>
    </section>

    


    <section class="section">
        <h2>自我评价</h2>
        <div class="content">
            <p>热爱编程，具备扎实的Java开发基础，熟悉常见开发框架和工具。有较强的学习能力和团队合作精神，能够快速适应新技术和新环境。</p>
        </div>
    </section>

    <script>
   function crawlWebsite() {
            const url = document.getElementById('crawl-url').value.trim();
            if (!url) {
                alert('请输入要爬取的URL');
                return;
            }

            document.getElementById('crawler-results').style.display = 'block';
            document.getElementById('page-title').textContent = '爬取中...';
            
            fetch(`/crawl-ip-site?url=${encodeURIComponent(url)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        document.getElementById('page-title').textContent = '错误: ' + data.error;
                        return;
                    }

                    // 显示页面标题
                    document.getElementById('page-title').textContent = data.page_title || '无标题';

                    // 显示链接
                    const linksList = document.getElementById('links-list');
                    linksList.innerHTML = '';
                    data.links.forEach(link => {
                        const linkElement = document.createElement('div');
                        linkElement.innerHTML = `<a href="${link.url}" target="_blank">${link.text || '无文本'} (${link.url})</a>`;
                        linksList.appendChild(linkElement);
                    });
                    document.getElementById('links-count').textContent = data.links.length;

                    // 显示图片
                    const imagesList = document.getElementById('images-list');
                    imagesList.innerHTML = '';
                    data.images.forEach(img => {
                        const imgElement = document.createElement('div');
                        imgElement.innerHTML = `<img src="${img.src}" alt="${img.alt}" style="max-width:200px;max-height:200px;margin:5px;">`;
                        imagesList.appendChild(imgElement);
                    });
                    document.getElementById('images-count').textContent = data.images.length;

                    // 显示文本内容
                    const textContent = document.getElementById('text-content');
                    textContent.innerHTML = '';
                    data.text_content.forEach(text => {
                        const textElement = document.createElement('div');
                        textElement.innerHTML = `<strong>${text.tag}:</strong> ${text.text}`;
                        textContent.appendChild(textElement);
                    });

                    // 显示表单
                    const formsList = document.getElementById('forms-list');
                    formsList.innerHTML = '';
                    data.forms.forEach(form => {
                        const formElement = document.createElement('div');
                        formElement.innerHTML = `
                            <div><strong>Action:</strong> ${form.action}</div>
                            <div><strong>Method:</strong> ${form.method}</div>
                            <div><strong>Inputs:</strong></div>
                            <ul>
                                ${form.inputs.map(input => `<li>${input.name} (${input.type})</li>`).join('')}
                            </ul>
                        `;
                        formsList.appendChild(formElement);
                    });
                    document.getElementById('forms-count').textContent = data.forms.length;
                })
                .catch(error => {
                    document.getElementById('page-title').textContent = '请求失败: ' + error.message;
                });
        }

        // 默认折叠部分内容
        window.onload = function () {
            const sections = ["education-content", "skills-content", "projects-content", "awards-content", "about-content", "crawler-content"];
            sections.forEach(id => {
                document.getElementById(id).style.display = "none";
            });
        };
    </script>
    </script>
</body>
</html>

</body>
</html>